<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import e3Lines from "@/data/echarts3-lines-bus"

export default {
    name: "AddEchartsBus.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map) => {
            map.setCenter([116.3836, 39.9263])

            let hStep = 300 / (e3Lines.length - 1);

            let busLines = [].concat.apply([], e3Lines.map(function (busLine, idx) {
                let prevPt;
                let points = [];
                for (let i = 0; i < busLine.length; i += 2) {
                    let pt = [busLine[i], busLine[i + 1]];
                    if (i > 0) {
                        pt = [
                            prevPt[0] + pt[0],
                            prevPt[1] + pt[1]
                        ];
                    }
                    prevPt = pt;
                    points.push([pt[0] / 1e4, pt[1] / 1e4]);
                }
                return {
                    "coords": points,
                    "lineStyle": {
                        "normal": {
                            "color": echarts.color.modifyHSL("#5A94DF", Math.round(hStep * idx))
                        }
                    }
                };
            }));

            let ecOption = {
                "series": [{
                    "type": "lines",
                    "polyline": true,
                    "data": busLines,
                    "lineStyle": {
                        "normal": {
                            "width": 0
                        }
                    },
                    "effect": {
                        "constantSpeed": 20,
                        "show": true,
                        "trailLength": 0.5,
                        "symbolSize": 1.5
                    },
                    "zlevel": 1
                }]
            };

            let e3Layer = new maptalks.E3Layer(MapLayerConst.MAP_E3_LAYER, ecOption, {
                hideOnZooming: true,
                hideOnRotating: true,
                hideOnMoving: true
            }).addTo(map);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>